<div class="row">
    <div class="col-md-12">
        <p>{{summary.description}}</p>
    </div>
</div>
<div class="row">
    <div class="col-md-8 md-container">
        <div *ngIf="readme" class="md-div" [innerHTML]="readme | markdown"></div>
        <div *ngIf="!readme">{{'HELM_CHART.NO_README' | translate}}</div>
    </div>

    <div class="col-md-4 summary-container">
        <div class="col-md-12 content-group">
            <div>
                <label>{{'HELM_CHART.OVERVIEW' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">{{'HELM_CHART.HOME' | translate }}</td>
                        <td class="left">
                            <a href="{{summary.home}}">{{summary.home}}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">{{'HELM_CHART.SRC_REPO' | translate }}</td>
                        <td class="left">
                            <a href="{{summary.sources}}">{{summary.sources}}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">{{'HELM_CHART.CREATED' | translate }}</td>
                        <td class="left">{{summary.created | date}}</td>
                    </tr>
                    <tr *ngFor="let maintainer of summary.maintainers; let i = index">
                        <td class="left" *ngIf="i === 0">{{'HELM_CHART.MAINTAINERS' | translate }}</td>
                        <td class="left" *ngIf="i !== 0"></td>
                        <td class="left">
                            <a href="mailto:{{maintainer.email}}">{{maintainer.name}}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">{{'HELM_CHART.VERSION' | translate }}</td>
                        <td class="left">{{ summary.appVersion }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-12 content-group">
            <div>
                <label>{{'HELM_CHART.ADD_REPO' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">{{addCMD}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-12 content-group">
            <div>
                <label>{{'HELM_CHART.INSTALL_CHART' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">{{installCMD}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-12 content-group">
            <div>
                <label>{{'HELM_CHART.SECURITY' | translate }}</label>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td class="left">{{'HELM_CHART.SIGNED' | translate }}</td>
                        <div *ngIf="security?.signature?.signed;then signed_content else unsignd_content"></div>
                        <ng-template #signed_content>
                            <td class="left">
                                <span class="content-icon">
                                    <clr-icon shape="shield-check" class="is-success"></clr-icon>
                                </span>&nbsp;{{'HELM_CHART.SIGNED' | translate }}</td>
                        </ng-template>
                        <ng-template #unsignd_content>
                            <td class="left">
                                <span class="content-icon">
                                    <clr-icon shape="shield-x" class="is-error"></clr-icon>
                                </span>&nbsp;{{'HELM_CHART.UNSIGNED' | translate }}</td>
                        </ng-template>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>